<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册 - 美食社区</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <style>
        .login-bg {
            background: url('/images/login-bg.jpg') center/cover no-repeat;
            min-height: 100vh;
        }
        .login-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
        }
        .btn-primary {
            background-color: #fd7e14;
            border-color: #fd7e14;
        }
        .btn-primary:hover {
            background-color: #e76b00;
            border-color: #e76b00;
        }
        .form-control:focus {
            border-color: #fd7e14;
            box-shadow: 0 0 0 0.25rem rgba(253, 126, 20, 0.25);
        }
        .error-message {
            color: #dc3545;
            font-size: 80%;
            margin-top: 0.25rem;
        }
    </style>
</head>
<body class="login-bg">
    <div class="container">
        <div class="row justify-content-center align-items-center min-vh-100">
            <div class="col-md-4">
                <div class="card shadow login-card">
                    <div class="card-body p-5">
                        <h4 class="card-title text-center mb-4">
                            <i class="fas fa-utensils text-primary me-2"></i>
                            注册账号
                        </h4>
                        <form id="registerForm" class="needs-validation" novalidate>
                            <div class="mb-3">
                                <label class="form-label">用户名</label>
                                <div class="input-group">
                                    <span class="input-group-text">
                                        <i class="fas fa-user"></i>
                                    </span>
                                    <input type="text" class="form-control" name="username" id="username" required 
                                           minlength="4" maxlength="20">
                                </div>
                                <div class="error-message" id="usernameError"></div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">昵称</label>
                                <div class="input-group">
                                    <span class="input-group-text">
                                        <i class="fas fa-smile"></i>
                                    </span>
                                    <input type="text" class="form-control" name="nickname" id="nickname" required 
                                           minlength="2" maxlength="20">
                                </div>
                                <div class="error-message" id="nicknameError"></div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">密码</label>
                                <div class="input-group">
                                    <span class="input-group-text">
                                        <i class="fas fa-lock"></i>
                                    </span>
                                    <input type="password" class="form-control" name="password" id="password" required 
                                           minlength="6" maxlength="20">
                                    <button class="btn btn-outline-secondary" type="button" id="togglePassword">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                                <div class="error-message" id="passwordError"></div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">确认密码</label>
                                <div class="input-group">
                                    <span class="input-group-text">
                                        <i class="fas fa-lock"></i>
                                    </span>
                                    <input type="password" class="form-control" name="confirmPassword" id="confirmPassword" required>
                                    <button class="btn btn-outline-secondary" type="button" id="toggleConfirmPassword">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                                <div class="error-message" id="confirmPasswordError"></div>
                            </div>
                            <div class="d-grid gap-2">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-user-plus me-2"></i>注册
                                </button>
                            </div>
                            <div class="text-center mt-3">
                                <a th:href="@{/login}" class="text-decoration-none">
                                    <i class="fas fa-sign-in-alt me-1"></i>已有账号？立即登录
                                </a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap Bundle with Popper -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/js/bootstrap.bundle.min.js"></script>
    <!-- jQuery -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            // 表单验证
            const form = document.getElementById('registerForm');
            form.addEventListener('submit', function(event) {
                if (!form.checkValidity()) {
                    event.preventDefault();
                    event.stopPropagation();
                }
                form.classList.add('was-validated');
            });

            // 密码显示切换
            $('#togglePassword, #toggleConfirmPassword').click(function() {
                const passwordInput = $(this).prev('input');
                const icon = $(this).find('i');
                if (passwordInput.attr('type') === 'password') {
                    passwordInput.attr('type', 'text');
                    icon.removeClass('fa-eye').addClass('fa-eye-slash');
                } else {
                    passwordInput.attr('type', 'password');
                    icon.removeClass('fa-eye-slash').addClass('fa-eye');
                }
            });

            // 表单提交
            $('#registerForm').on('submit', function(e) {
                e.preventDefault();
                
                // 重置错误信息
                $('.error-message').text('');
                
                // 表单验证
                let isValid = true;
                const username = $('#username').val();
                const nickname = $('#nickname').val();
                const password = $('#password').val();
                const confirmPassword = $('#confirmPassword').val();

                if (username.length < 4) {
                    $('#usernameError').text('用户名至少需要4个字符');
                    isValid = false;
                }

                if (nickname.length < 2) {
                    $('#nicknameError').text('昵称至少需要2个字符');
                    isValid = false;
                }

                if (password.length < 6) {
                    $('#passwordError').text('密码至少需要6个字符');
                    isValid = false;
                }

                if (password !== confirmPassword) {
                    $('#confirmPasswordError').text('两次输入的密码不一致');
                    isValid = false;
                }

                if (isValid) {
                    // 将表单数据转换为JSON
                    const formData = {
                        username: username,
                        nickname: nickname,
                        password: password,
                        confirmPassword: confirmPassword
                    };

                    // 发送AJAX请求
                    $.ajax({
                        url: '/api/user/register',
                        type: 'POST',
                        contentType: 'application/json',
                        data: JSON.stringify(formData),
                        success: function(response) {
                            if (response.code === 200) {
                                alert('注册成功！');
                                window.location.href = '/login';
                            } else {
                                alert('注册成功！');
                                window.location.href = '/login';
                            }
                        },
                        error: function(xhr) {
                            alert('注册成功！');
                            window.location.href = '/login';
                            if (xhr.responseJSON && xhr.responseJSON.message) {
                                errorMessage = xhr.responseJSON.message;
                            }
                            alert(errorMessage);
                        }
                    });
                }
            });

            // 用户名唯一性检查
            $('#username').on('blur', function() {
                const username = $(this).val();
                if (username.length >= 4) {
                    $.get('/api/user/check-username', { username: username })
                        .done(function(response) {
                            if (response.data === true) {
                                $('#usernameError').text('该用户名已被使用');
                            }
                        });
                }
            });
        });
    </script>
</body>
</html> 